{

  //upimage
  const input = document.querySelector("input[type=file]");
  const images = document.querySelector(".images-list");
  var imagesArr = [];
  var booksArr = {};
  var bookNames =["default"];
  var currentBook = "default";
  for(let i = 0;i<images.children.length;i++){
    imagesArr.push(images.children[i]);
  }
  booksArr[currentBook]=imagesArr;
  // images.children[].forEach(img=>{
  //   let image = img.firstElementChild;
  //   imagesArr.add(image);
  // })
  // console.log(imagesArr);
  input.addEventListener("change",up_handle);
  function up_handle(event){
    const file = input.files[0];
    const fr = new FileReader();
    fr.onload = function(){
      const img = new Image();
      img.src = fr.result;

      const imageDivDOM = document.createElement("div");
      imageDivDOM.className = "image";
      imageDivDOM.appendChild(img);
      images.insertAdjacentElement("beforeEnd",imageDivDOM);
      imagesArr.push(imageDivDOM);
      booksArr[currentBook]=imagesArr;
      // console.log(imagesArr);
      // render_image(imagesArr.length/10);
      if(imagesArr.length>0 && imagesArr.length%10===0){
        ctPdom(imagesArr.length/10);

      }
    }
    fr.readAsDataURL(file);
  }
  //
  // if(imagesArr.length>0 && imagesArr.length%10===0){
  //   ctPdom(imagesArr.length/10);
  // }
  //create picture box
  const createbtn = document.querySelector("button");
  const dialog = document.querySelector(".dialog");
  const okbtn = dialog.querySelector("input[type=button]");
  const nameedt = dialog.querySelector("input[type=text]");
  const nav = document.querySelector("nav");
  createbtn.addEventListener("click",function(event){
    // console.log(dialog);
    dialog.className = "show";
    nameedt.value = "";
  })

  for(let i = 0;i<nav.children.length;i++){
    nav.children[i].addEventListener("click",clickbookHandle);
  }
  okbtn.addEventListener("click",function(event){
    dialog.className = "dialog";
    console.log(nameedt.value);
    const Adom = document.createElement("a");
    Adom.href = "javascript:void();"
    Adom.innerText = nameedt.value;
    bookNames.push(nameedt.value);
    booksArr[nameedt.value] = [];
    currentBook = nameedt.value;
    nav.insertAdjacentElement("beforeEnd",Adom);
    Adom.addEventListener("click",clickbookHandle);
  })


  //fenye
  const fenyediv = document.querySelector(".fenye");

  //create a function
  function ctPdom(index){
    const pdom = document.createElement("p");
    pdom.innerText = index+1;
    fenyediv.insertAdjacentElement("beforeEnd",pdom);
    pdom.addEventListener("click",p_clickhandle);
  }
  for (var i = 0; i < fenyediv.children.length; i++) {
    // console.log(fenyediv.children);
    fenyediv.children[i].addEventListener("click",p_clickhandle);
  }

  function p_clickhandle(event){
    var index = parseInt(event.target.textContent);

    // console.log(index);
    render_image(index);
  }

  function render_image(index){
    for(let i=0;i<imagesArr.length;i++){
      imagesArr[i].style.display = "none";
      // console.log(i);
    }
    var j = (index-1)*10;
    for(j;j<j+10;j++){
      imagesArr[j].style.display = "block";
    }
  }


  //dianji新相册
  function clickbookHandle(event){
    currentBook = event.target.text;
    if("默认" === currentBook)
      currentBook = "default";
    console.log(currentBook);
    imagesArr = booksArr[currentBook];
    render_book();
  }

  function render_book(){
    images.innerText="";
    for (image of imagesArr) {
      images.appendChild(image);
    }
    fenyediv.innerText = "";

    // for(let i=0;i<imagesArr.length;i++){
    // if(imagesArr.length>0 && imagesArr.length%10===0){
    //   ctPdom(imagesArr.length/10);
    // }
    // }
    // ctPdom()
  }



}
